<template>
  <view class="about-bg">
    <view class="about-card">
      <view class="logo-wrap">
        <image src="/static/logo.png" class="logo" />
      </view>
      <view class="content-container">
        <view class="content" v-if="content">
          <rich-text :nodes="content"></rich-text>
        </view>
        <view class="loading" v-else>
          <text>加载中...</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import ContentApi from '@/sheep/api/member/content';

  const content = ref('');

  onMounted(() => {
    loadAboutContent();
  });

  // 加载关于我们内容
  const loadAboutContent = async () => {
    uni.showLoading({ title: '加载中...' });
    try {
      const response = await ContentApi.get(3);
      
      if (response.code === 0 && response.data && response.data.content) {
        content.value = response.data.content;
      } else {
        content.value = '关于我们内容加载中...';
      }
    } catch (error) {
      content.value = '关于我们内容加载中...';
    } finally {
      uni.hideLoading();
    }
  };
</script>

<style lang="scss" scoped>
.about-bg {
  min-height: 100vh;
  background: #f6f7fa;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.about-card {
  background: #fff;
  margin: 20rpx 16rpx 0 16rpx; 
  border-radius: 0 0 26rpx 26rpx;
  box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.04);
  padding: 60rpx 38rpx 36rpx 38rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-wrap {
  margin-bottom: 37rpx;
  width: 224rpx;
  height: 224rpx;
  border-radius: 50%;
  background: #f6f7fa;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  width: 212rpx;
  height: 212rpx;
  border-radius: 50%;
  object-fit: cover;
  background: #eee;
}

.content-container {
  width: 100%;
}

.content {
  line-height: 1.6;
  font-size: 28rpx;
  color: #333;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200rpx;
  font-size: 28rpx;
  color: #999;
}
</style>